<!DOCTYPE html>
<html>
<head>
	<title>星空粒子特效--particles.js加上水波特效--jquery.ripples.js</title>
	<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
	<script src="../js/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/particles.js/2.0.0/particles.js"></script>
	<script src="https://cdn.bootcss.com/jquery.ripples/0.5.3/jquery.ripples.js"></script>
	<style>
		body{
			background:url(../images/house.jpg) no-repeat;
		}
	</style>
</head>
<body>
	<div id="particles-js">
		
	</div>
</body>
<script>
	$(document).ready(function(){
		particlesJS('particles-js',{
			"particles": {
			    "number": {
			      "value": 100,
			      "density": {
			        "enable": true,
			        "value_area": 800
			      }
		    	},
			    "color": {
			      "value": "#cc33cc"
			    },
			    "shape": {
			      "type": "circle",
			      "stroke": {
			        "width": 1,
			        "color": "#99ffcc"
			      },
			      "polygon": {
			        "nb_sides": 5
			      },
			      "image": {
			        "src": "img/github.svg",
			        "width": 100,
			        "height": 100
			      }
			   	},
			    "opacity": {
			      "value": 0.75,
			      "random": true,
			      "anim": {
			        "enable": true,
			        "speed": 1,
			        "opacity_min": 0,
			        "sync": false
			      }
			    },
			    "size": {
			      "value": 3,
			      "random": true,
			      "anim": {
			        "enable": false,
			        "speed": 4,
			        "size_min": 0.3,
			        "sync": false
			      }
			    },
			    "line_linked": {
			      "enable": true,
			      "distance": 200,
			      "color": "#9966ff",
			      "opacity": 0.5,
			      "width": 1
			    },
			    "move": {
			      "enable": true,
			      "speed": 1,
			      "direction": "none",
			      "random": true,
			      "straight": false,
			      "out_mode": "out",
			      "bounce": false,
			      "attract": {
			        "enable": false,
			        "rotateX": 600,
			        "rotateY": 600
			      }
			    }
		  },
		  "interactivity": {
		    	"detect_on": "canvas",
			    "events": {
			      "onhover": {
			        "enable": true,
			        "mode": "grab"
			      },
			      "onclick": {
			        "enable": true,
			        "mode": "push"
			      },
		      	"resize": true
		    	},
		    	"modes": {
			      "grab": {
			        "distance": 400,
			        "line_linked": {
			          "opacity": 1
			        }
			      },
			      "bubble": {
			        "distance": 250,
			        "size": 0,
			        "duration": 2,
			        "opacity": 0,
			        "speed": 3
			      },
			      "repulse": {
			        "distance": 400,
			        "duration": 0.4
			      },
			      "push": {
			        "particles_nb": 4
			      },
			      "remove": {
			        "particles_nb": 2
			      }
		    }
		  },
		  "retina_detect": true
		});

		$("body").ripples({
			resolution: 512, //分辨率:256
			dropRadius: 20, //水波涟漪的半径:20
			perturbance: 0.04, //干扰效果：0.03
			interactive:true //是否可以用鼠标进行互动:falsae
		});
		$('body').ripples('play');
	});
</script>
</html>